<template>
  <div class="chartWrap">
  		<span class="spanTile text1 red">{{this.buyArr.prev_price,this.buyArr.high_price,this.buyArr.low_price | todoT1}}</span>
    	<span class="spanTile text2 red">{{this.buyArr.prev_price,this.buyArr.high_price,this.buyArr.low_price | todoT2}}</span>
    	<span class="spanTile text3 green">{{this.buyArr.low_price}}</span>
    	<span class="spanTile text4 green">{{this.buyArr.prev_price,this.buyArr.high_price,this.buyArr.low_price | todoT3}}</span>
  	
    <div id="mainTime"></div>
    <div id="pie"></div>
    <div class="list">
      <ul>
        
        <li>
          <span>卖5</span>
          <span class="greenColor" :class="sColor(buyArr.rise_price)">{{buyArr.ask_price5}}</span>
          <span>{{buyArr.ask_volume5 | todoTo}}</span>
        </li>
        <li>
          <span>卖4</span>
          <span class="greenColor" :class="sColor(buyArr.rise_price)">{{buyArr.ask_price4}}</span>
          <span>{{buyArr.ask_volume4 | todoTo}}</span>
        </li>
        <li>
          <span>卖3</span>
          <span class="greenColor" :class="sColor(buyArr.rise_price)">{{buyArr.ask_price3}}</span>
          <span>{{buyArr.ask_volume3 | todoTo}}</span>
        </li>
        <li>
          <span>卖2</span>
          <span class="greenColor" :class="sColor(buyArr.rise_price)">{{buyArr.ask_price2}}</span>
          <span>{{buyArr.ask_volume2 | todoTo}}</span>
        </li>
        <li>
          <span>卖1</span>
          <span class="greenColor" :class="sColor(buyArr.rise_price)">{{buyArr.ask_price1}}</span>
          <span>{{buyArr.ask_volume1 | todoTo}}</span>
        </li>
        <li>
          <span>买1</span>
          <span class="greenColor" :class="sColor(buyArr.rise_price)">{{buyArr.bid_price1}}</span>
          <span>{{buyArr.bid_volume1 | todoTo}}</span>
        </li>
        <li>
          <span>买2</span>
          <span class="greenColor" :class="sColor(buyArr.rise_price)">{{buyArr.bid_price2}}</span>
          <span>{{buyArr.bid_volume2 | todoTo}}</span>
        </li>
        <li>
          <span>买3</span>
          <span class="greenColor" :class="sColor(buyArr.rise_price)">{{buyArr.bid_price3}}</span>
          <span>{{buyArr.bid_volume3 | todoTo}}</span>
        </li>
        <li>
          <span>买4</span>
          <span class="greenColor" :class="sColor(buyArr.rise_price)">{{buyArr.bid_price4}}</span>
          <span>{{buyArr.bid_volume4 | todoTo}}</span>
        </li>
        <li>
          <span>买5</span>
          <span class="greenColor" :class="sColor(buyArr.rise_price)">{{buyArr.bid_price5}}</span>
          <span>{{buyArr.bid_volume5 | todoTo}}</span>
        </li>
      </ul>
    </div>
  </div>
</template>

<script>
import deal from '@/api/deal/index'
import { toast} from '@/util/index'

export default {
	data(){
		return{
			buyArr:[],
			todayData:"",
			worldTime:"",
			tempData:[],
			todayDataListX:[],
			minTime:"",																	//x轴最小时间
    	maxTime:"",
    	max_Price:"", 																	//今日涨幅峰值
    	min_Price:"", 
    	tData0:"",
    	lastDataValue:"",
    	lastDataDate:"",
    	series3_data :"",
    	chart_tsd:"",
    	newData:[],//单数据
    	newTime:[],//单时间
    	business_amount:[],
    	line:"",
		}
	},
	filters:{
		todoTo(num){
			return  Math.round(num); 
		},
		todoT1(zs,high,low){
			var z= parseFloat(zs);
			var h= parseFloat(high);
			var l= parseFloat(low);
			
			if(Math.abs(z-h)>=Math.abs(z-l)){
			
				 return (Math.abs(z-h)+z).toFixed(2);
			}else{
				
				return (Math.abs(z-l)+z).toFixed(2);
			}
		},
		todoT2(zs,high,low){
			var z= parseFloat(zs);
			var h= parseFloat(high);
			var l= parseFloat(low);
			
			if(Math.abs(z-h)>=Math.abs(z-l)){
				 return "+"+(Math.abs(z-h)/z*100).toFixed(2)+"%";
			}else{
				return "+"+(Math.abs(z-l)/z*100).toFixed(2)+"%";
			}
		},
		todoT3(zs,high,low){
			var z= parseFloat(zs);
			var h= parseFloat(high);
			var l= parseFloat(low);
			
			if(Math.abs(z-h)>=Math.abs(z-l)){
				 return "-"+(Math.abs(z-h)/z*100).toFixed(2)+"%";
			}else{
				return "-"+(Math.abs(z-l)/z*100).toFixed(2)+"%";
			}
		}
		
	},
  methods: {
  		 sColor(name){
	    	if(name>0){
	    		return "red";
	    	}else{
	    		return "";
	    	}
	    	
	    },
	  	initData(){
	  			let senddata = {
						code:this.$route.query.stockNum||"000001",
						plat:"mlj"
					}
				
					deal.getTrendByCode(senddata).then((res) => {
						if (res.data.code == 200 && res.data.data.length>0 ) { 
							 console.log()
							 	 this.dataChange(res.data.data);
							 	 this.newChangeData(res.data.data);
						}else if(res.data.code==222){
		            this.$router.push({path:'/login'})
		        } else {
							toast(res.data.message)
						}
					})
	  	},
	  	newChangeData(data){
	  			for(var item in data ){
	  					var num=data[item].last_price;
	  					var num2=data[item].afterAmount;
	  					this.newData.push(parseFloat(num));
	  					this.business_amount.push(parseFloat(num2));
	  					this.newTime.push(data[item].time);
	  			}
	  			this.highStockDo();
	  			this.makePie();
	  	},
	  	//原始数据改造
			dataChange(data){
			    var dataTime = new Date();
			    var year =dataTime.getFullYear();
			    var month =dataTime.getMonth()+1;
			    var day =dataTime.getDate();
			    if(day < 10 ){
			        day = '0'+day;
			    }else{
			        day = day;
			    }
			    if(month < 10 ){
			        month = '0'+month;
			    }else{
			        month = month;
			    }
			    var newDate = [];
			    for(var i=0;i<data.length;i++){
			        newDate[i] = [];
			        for(var j=0;j<2;j++){
			            if(j == 0){
			                var dateFornt = data[i].time.replace(":","");
			                if(dateFornt.length < 4){
			                    dateFornt = '0'+dateFornt;
			                }
			                var dateStr 	= year+''+month+''+day+''+dateFornt;
			                newDate[i][j] = parseInt(dateStr);
			            }else if(j == 1){
			                newDate[i][j] = Number(data[i].last_price);
			            }
			        }
			    }
			    //console.log(newDate);
			    this.dataOn(newDate);
			},
			//原始数据改造后加载
			dataOn(data){
			    //x轴时间段分布
			    this.todayData 			= data[0][0];
			    var datas 			= this.todayData.toString().substring(0, 8);
			    var todayDataTom	= Number(this.vDateChange(this.todayData))
			    this.minTime = this.todayDataListX[0]
			    this.maxTime = this.todayDataListX[this.todayDataListX.length - 1];
			
			    this.tempData = data;
			    this.tDataList(data, 1, null);
			},
					//图表格数据
			tDataList(data, flag, series) {  ///parseInt()
			    //获取最大值和最小值
			    this.max_Price = data[0][1];
			    this.min_Price = data[0][1];
			    for (var i = 0; i < data.length; i++) {
			        this.max_Price = parseFloat(data[i][1]) > this.max_Price ? parseFloat(data[i][1]) : this.max_Price;
			        this.min_Price = parseFloat(data[i][1]) < this.min_Price ? parseFloat(data[i][1]) : this.min_Price;
			    }
			
			    this.tData0 = this.tSplitData0(data); //分时图最新价数据链生成
			    this.tDateChange(this.tData0.tValues0); //分时图X轴时间日期格式转换
				
			    //判断是否需要向前新增数据点（1为初始化加载分时图，2为向前增加数据点）
			    if (flag == 1) {
			        this.highStockDo();
			    } else if (flag == 2) {
			        tsdAdd(series);
			    }
			},
			
			
			
			
			
			
			
			//生成柱状图
			makePie(){
				var Highcharts = require('highcharts/highcharts.src');
	      Highcharts.chart('pie',{
	      	chart: {
	      		 type: 'column',
	            backgroundColor:'#1b1e2a',
	        },
	        legend: {                                                                    
            enabled: false                                                           
        	},
	        rangeSelector: {
	            enabled: false
	        },
	        exporting: {
	            enabled: false
	        },
	        navigator: {
	            enabled: false
	        },
	        scrollbar: {
	            enabled: false
	        },
	        credits: {
	            enabled: false
	        },
	        tooltip: {
	            enabled: false
	        },
	        plotOptions: {
	            series: {
	                states: {
	                    hover: {
	                        lineWidth: 1
	                    }
	                }
	            }
	        },
	         
	        title: {
	           text:null,
	        },
	       
	        
	        xAxis: {
            
            gridLineWidth:0,
            gridLineWidth: 1,
            gridLineColor:'#262934',
            tickWidth: 0,
            lineWidth: 0,
            min:0,  
        		max:240,  
            tickInterval:60*2	,
            categories:this.newTime,
            labels: {
            	enabled: false
	            
	           
	        	}
	        },
	       /* tooltip: {// 悬浮框
	            dateTimeLabelFormats: {
	                millisecond: '%H:%M:%S.%L',
	                second: '%H:%M:%S',
	                minute: '%H:%M',
	                hour: '%H:%M',
	                day: '%Y-%m-%d',
	                week: '%m-%d',
	                month: '%Y-%m',
	                year: '%Y'
	            }
	        },*/
	        yAxis: {
	        		gridLineWidth:0,
	            title: {
	                text: null,
	            },
              labels: {
	            	enabled: false
		        	}
	        },
	       
	        series: [{
	            type: 'column',
	            name: '最新价',
	            data:this.business_amount //this.tData0.tValues0
	       	}]
	      })  
			},
			
			
			
			
			
			
			
			
			
			
			
			
			
			
			
			
			
			
			
			
			
			
			
			
			//生成分时图
			highStockDo() {
				var Highcharts = require('highcharts/highcharts.src');
	      Highcharts.chart('mainTime',{
	      	chart: {
	            backgroundColor:'#1b1e2a',
	        },
	      
	        rangeSelector: {
	            enabled: false
	        },
	        exporting: {
	            enabled: false
	        },
	        navigator: {
	            enabled: false
	        },
	        scrollbar: {
	            enabled: false
	        },
	        credits: {
	            enabled: false
	        },
	        tooltip: {
	            enabled: false
	        },
	        plotOptions: {
	            series: {
	                states: {
	                    hover: {
	                        lineWidth: 1
	                    }
	                }
	            }
	        },
	         
	        title: {
	           text:null,
	        },
	       
	        
	        xAxis: {
	        	showLastLabel:true,
	          showFirstLabel:true,
            gridLineWidth: 1,
            gridLineColor:'#262934',
            tickWidth: 0,
            lineWidth: 0,
            min:0,  
        		max:240,  
            tickInterval:60*2,
            categories:this.newTime,
            labels: {
	            style:{
	                'color': '#fff',
	                "font-size":"0.32rem"
	            },
	            formatter: function () {
	            	 if(this.value=="9:30"){
	            	 	 return "9:30";
	            	 }else if(this.value=="11:30"){
	            	 		return '11:30/13:00';
	            	 }
	            	 	var arr = [];  
                	arr[0]   = '09:30'; 
                	arr[120] = '11:30/13:00';  
                	arr[240] = '3:00';  
                	return arr[this.value];  
	            }
	           
	        	},
            
	        },
	       /* tooltip: {// 悬浮框
	            dateTimeLabelFormats: {
	                millisecond: '%H:%M:%S.%L',
	                second: '%H:%M:%S',
	                minute: '%H:%M',
	                hour: '%H:%M',
	                day: '%Y-%m-%d',
	                week: '%m-%d',
	                month: '%Y-%m',
	                year: '%Y'
	            }
	        },*/
	        
	        yAxis: {
	            title: {
	                text: null,
	            },
	            plotLines:[{
	            		color: '#007fff',
	            		label:{
	            			text:this.line,
                    verticalAlign: 'bottom',
                    textAlign: 'left',
                    y: -10,
                    style:{
                    	color:"#56627c",
                    	fontSize:"0.2667rem",
                    }
	            		},
	                width: 1,
	                value:this.line,
	                dashStyle: 'LongDash'
					            	
	            }],
	            showLastLabel:false,
	            showFirstLabel:false,
            	tickAmount:4,

              max: this.max_Price,
           		min: this.min_Price-0.2,
              gridLineWidth: 1,
              gridLineColor:'#262934',
              labels: {
                enabled: false
            	}   
	        },
	        legend: {
	            enabled: false
	        },
	        
	        plotOptions: {
	        		
	            area: {
            			enabled:true,
	                fillColor: {
	                    linearGradient: {
	                        x1: 0,
	                        y1: 0,
	                        x2: 0,
	                        y2: 1
	                    },
	                    stops: [
	                      
	                        [1, Highcharts.Color('#3483C3').setOpacity(0.1).get('rgba')]
	                    ]
	                },
	                marker: {
	                    radius: 2
	                },
	                lineWidth: 1,
	                states: {
	                    hover: {
	                        lineWidth: 1
	                    }
	                },
	                threshold: null,
	            }
	        },
	        series: [{
	            type: 'area',
	            name: '最新价',
	            data:this.newData //this.tData0.tValues0
	       	}]
				})
			},
		 
			//日期转为时间戳
			tDateChange(data) {
			    for (var i = 0; i < data.length; i++) {
			        var date = data[i][0] + '';
			        var year = date.substring(0, 4);
			        var month = date.substring(4, 6);
			        var day = date.substring(6, 8);
			        var hour = date.substring(8, 10);
			        var minute = date.substring(10, 12);
			        var strDate = year + '/' + month + '/' + day + ' ' + hour + ':' + minute + ':' + '00';
			        var newDate = new Date(strDate);
			        var time = newDate.getTime();
			        data[i][0] = time;
			        
			    }
			    
			},
			//最新价分时图数据
			tSplitData0(rawData) {
			//console.log(rawData +"---");
			    var tValues0 = [];
			    for (var i = 0; i < rawData.length; i++) {
			        tValues0[i] = [];
			        var temp = rawData[i];
			        for (var j = 0; j < 2; j++) {
			            tValues0[i][j] = temp[j];
			        }
			    }
			   
			    return {
			    		
			        tValues0: tValues0
			    };
			},
	
				//日期转为时间戳
			vDateChange(data) {
			    var date = data + '';
			    var year = date.substring(0, 4);
			    var month = date.substring(4, 6);
			    var day = date.substring(6, 8);
			    var hour = date.substring(8, 10);
			    var minute = date.substring(10, 12);
			    var strDate = year + '/' + month + '/' + day + ' ' + hour + ':' + minute + ':' + '00';
			    var newDate = new Date(strDate);
			    var time = newDate.getTime();
			    return  time;
			},
			setTime() {
	       setTimeout(() => { 
	            this.initData();
	        }, 1000)
    	},
		
  },
  mounted() {
  	this.setTime();
  	//this.initData();
    //this.initMainTime();
  },
 
  computed:{
	  getUserData() {
	  		
	  		this.buyArr=this.$store.state.buyArr;
	  		this.line=this.$store.state.buyArr.prev_price;
	  }
	},
	watch: {
	  getUserData(val) {
	    this.buyArr = val;
	   
	  }
	}
}
</script>


<style lang="less" scoped>
@import '../../../less/config.less';
.chartWrap {
 	height: 6.667rem;
 	border-top:#262934  1px solid;
  position: relative;
  margin-bottom:.2rem;
  .spanTile{
    	position: absolute;
    	z-index: 10000;
    	top: @p30;
    	left:  @p30/2;
    	font-size:@fsize;
   }
   .red{
   	 	color: #FF335B;
   }
   .green{
   	 	color: #33FFC3;
   }
   .text2{
   		left: 5.4rem;
   	
   }
   .text3{
   		top: 3.2rem;
   	
   }		
   .text4{
   		top: 3.2rem;
   		left: 5.4rem;
   	
   }	
  #mainTime{
    width: 6.5rem;
    height: 4.65rem;
    background:#1b1e2a;
    color:#fff;
    
  }
  #pie{
  	width: 6.5rem;
    height: 2rem;
    background:#1b1e2a;
    color:#fff;
  }
  .list {
    position: absolute;
    top: 0;
    right:0;
    height:6.667rem;
    padding-right:0.4rem;	
    color: @fcolor;
    width: 3.5rem;
    font-size: @fsize;
    background: #141723;
    ul{
    	
    	height: 100%;
    	display: flex;
      flex-direction: column;
      justify-content: space-around;
      li{
      	display: flex;
      	justify-content: flex-start;
      	align-items: center;
      }
    }
    li {
      height: 0.5rem;
    }
    span {
      display: inline-block;
    }
    .greenColor {
      color: #33ffc3;
      width: 1.5rem;
      margin-left: .2rem;
      text-align: left;
    }
    .red{
    	color: #FF335B;
    }
  }
}
</style>
